<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <meta charset="UTF-8"/>
  <% include("/include/header3.html",{"title":"代码生成"}){} %>
</head>
<body>
<div class="layui-fluid" id="app">
  <div class="layui-card">
    <div class="layui-card-body">
      <t-form :data="queryForm" label-width="calc(5em + 20px)" layout="inline" scroll-to-first-error="smooth" colon>
        <t-form-item label="数据库表名" name="dbTable">
          <t-input v-model="queryForm.dbTable" clearable placeholder="请输入数据库表名"></t-input>
        </t-form-item>
        <t-space>
          <t-button theme="primary" @click="queryData">
            <template #icon><i class="layui-icon layui-icon-search text-size-s mr-5"></i></template>
            查询
          </t-button>
          <t-button theme="primary" @click="onEdit({})">
            <template #icon><i class="layui-icon layui-icon-add-1 text-size-s mr-5"></i></template>
            新增
          </t-button>
        </t-space>
      </t-form>
    </div>
  </div>

  <div class="layui-card">
    <div class="layui-card-body">
      <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
      <t-table :columns="columns" :data="table.data" :loading="table.loading" bordered hover resizable>
        <template #loading>
          <div class="t-table--loading-message">加载数据中，请稍后...</div>
        </template>
      </t-table>
      <div class="px-16 py-10">
        <t-pagination v-model="queryForm.pageNumber" v-model:page-size="queryForm.pageSize" :total="table.totalRow" show-first-and-last-page-btn show-jumper
                      @change="queryData"></t-pagination>
      </div>
    </div>
  </div>

</div>


<script>
  const PATH_URL = 'gen/basic/';
  const CONFIG_URL = 'gen/config/';
</script>
<script>
  setupVue('#app', {
    setup() {
      // 查询表单
      const queryForm = Vue.reactive({ pageNumber: 1, pageSize: 10, totalRow: -1, dbTable: '' });
      // 表格数据
      const table = useTable();
      // 获取表格数据
      const fetchData = (window.reloadData = () => fetchPage(axiosGet, PATH_URL + 'page', queryForm, table));
      const queryData = (info = {}) => {
        Vue.nextTick(() => {
          const { current = 1, pageSize } = info;
          queryForm.pageNumber = current;
          if (pageSize) queryForm.pageSize = pageSize;
          fetchData();
        })
      }
      init(() => {
        fetchData();
      });

      // 编辑
      const onEdit = (item) => {
        openLayer({
          content: PATH_URL + 'edit',
          data: { id: item.id },
        });
      };
      // 删除数据
      const onDelete = (item) => handleDelete(axiosDelete, PATH_URL + 'delete', { id: item.id }, table, '确定删除【' + item.busName + '】表吗？', fetchData);

      // 生成
      const execGen = (row) => {
        if (row.generateType === 1) {
          window.open(PATH_URL + "execGenZip/" + row.id)
        } else if (row.generateType === 2) {
          req(axiosGet, PATH_URL + "execGenPro/" + row.id, {}, (res) => $baseAlert(res.msg))
        } else {
          $baseAlert("未知生成方式")
        }
      }
      // 配置
      const openConfig = (id) => location.href = CONFIG_URL + "index/" + id;

      // 列配置
      const columns = [
        { colKey: 'serial-number', align: 'center', title: '', width: 50 },
        { colKey: 'busName', title: '业务名', align: 'center' }, { colKey: 'functionName', title: '功能名', align: 'center' },
        { colKey: 'className', title: '类名', align: 'center' }, { colKey: 'packageName', title: '包名', align: 'center' },
        { colKey: 'authorName', title: '作者', align: 'center' },
        { colKey: 'tablePrefix', title: '移除表前缀', align: 'center', cell: (h, { row }) => (row.tablePrefix == 1 ? '移除' : '不移除') },
        { colKey: 'generateType', title: '生成方式', align: 'center', cell: (h, { row }) => (row.generateType == 1 ? '压缩包' : '项目内') },
        {
          title: '操作',
          align: 'center',
          cell: (h, { row }) => {
            return h(TDesign.Space, {}, [
              h(TDesign.Button, { theme: 'primary', underline: true, onClick: () => onEdit(row) }, '编辑'),
              h(
                TDesign.Dropdown,
                {
                  minColumnWidth: 90,
                  placement: 'bottom',
                  options: [
                    { content: '配置', onClick: () => openConfig(row.id) },
                    { content: '生成', onClick: () => execGen(row) },
                    { content: '删除', theme: 'error', onClick: () => onDelete(row) },
                  ],
                },
                h(
                  TDesign.Button,
                  { theme: 'primary', variant: 'outline' },
                  {
                    default: () => '更多操作',
                    suffix: () => h('i', { class: 'layui-icon layui-icon-down text-xs' }),
                  },
                ),
              ),
            ]);
          },
        },
      ];
      return {
        columns, queryForm, table, queryData, onEdit, onDelete,
        openConfig, execGen,
      };
    },
  });
</script>
</body>
</html>
